NewBeginnings:DiscoverStudio
I'll take for granted that you already installed Wakanda. The process is really simple and if you have trouble with it... honestly... you're not getting into something that you are ready for. Fire it up! When you open Wakanda, you will see this window. The whole interface is divided the same way all along the development process, no matter what you are editing. The toolbar at the top never change and the bottom section (not counting the status bar) will adapt accordingly. The left section let you open your solutions, which are groups of related projects. Since version 4, you can also share the data models of the different projects of a solution. To hide the left panel, you can double click on the splitter or drag it to the left side of the screen. The right part of the window will become your work area when you open a solution. The solution tree-view Now create a new solution called New Beginnings and you will see that the work area loading. In the screenshot above, my solution is already created and is available in the left panel. You simply have to click the name of a solution to open it back. Once the solution is loaded, the Left panel will have a new tab with the name of the solution and you will come back to the Home tab only if you want to load another solution. The left panel should look like this now that you created your solution. You can see that a project with the same name as the solution was automatically created and this is where we will work for the whole tutorial, unless I get to the point where I explore data model sharing. We might get there, but at the time I write this, I don't have a roadmap that big for this project. For the first step, click on the New Page button on the toolbar and create a page named "Blank". The right part of the screen will now load the GUI designer and you will finally see the real work space of Wakanda. Before throwing yourself in the editor, take a first look on the project's treeview. You will see a bunch of folders and what may look like files. In that tree, you can access project specific settings, define permissions (Wakanda have a very good multi-user management system included), create and edit the data model for the project, as well as access the file structure of the project. Right now, expand the "WebFolder" item and take a look at what is in there. There is already an "index" page created and there should be your "Blank" page too. In wakanda, each page is actually a folder containing all the needed information and data to make it work. You can see each page as a module of your application or a different window if, like me, you come from a desktop programming background. Now, expand your "Blank" page item. Inside that item you will see a folder named "styles" containing the CSS files for your page. You can also add any custom and page-specific CSS file you need to this folder. There is also a "index.html file with the visual content of the page you are looking at. Double click any file at any time to load the proper editor in the right part of the screen. The GUI editor will load for HTML files, the code editor will load for any CSS or JS file you may load and the model designer will load whenever you access the "Model" item in the tree. All the other items (Settings, Permissions, etc.) will load their custom editor panel as well. The work area When you created the "Blank" page, the GUI editor loaded by default. what you should see is something like this in the right section of the screen. As I already said, this panel will change according to what you are doing, but they managed to keep it consistent from a module to another. It will most of the time be divided in 3 vertical sections with a toolbar on top. The GUI designer So this is what you should see since you created your new page. Brief description of what you see on the screen: The left bar contains the available widgets (AKA controls or components in the desktop programming world) and your data classes and sources (more on this later). The right part is the property editor and is divided in 4 tabs: Properties, Events, Skins and Styles. The Properties and Event tabs should make any Delphi or VB programmer feel at home. There you can change the behaviour of your widgets. Keep in mind that by having nothing selected, you will have access to the page's properties and events. The Skin tab is where you can select and define the color palette used as well as the general theme and skin for your widget or page. This is usefull to create some application-wide visual consistency and can save you a lot of time when you do the visual design of your project. The Styles tab is where you can edit the visual style of a single widget or element of that widget. Any textfield, for example, has a label attached to it. You cannot directly change the visual appearence of that label by selecting it. Instead, you select the textfield, go to the Styles tab and chose the label in the combobox. The model editor Go back to the project tree-view and double-click on the Model item. The GUI designer will now leave the place to the model editor. By default, Wakanda will create a basic data class for you, as it's implied that if you work with Wakanda, you will work with its database. And if you work with a database, you need a model. So here is, IMHO, the best data modeler ever made. It's simple, efficient, visual and powerful. Play with it a little for now if you want, but we will come back on this later. The important thing is the workspace division. As you can see, the layout is pretty much the same. The left panel contains the list of every data class you have and the right panel is the property editor for the selected data class. Again this part is divided in multiple tabs which are Properties, Events and Methods. Depending on you former database experience, you may feel already that something is different here. And you would be right! You can define at design-time, how you want your data classes to behave in different contexts by adding events and methods to them. You can see the data classes in Wakanda as an object definition in OOP. And believe it or not, but there is some crazy things you can do as you have basic inheritance and parenting included in the toolbox! Initializing an entity is as simple as adding an event and hardcoding the basic values for the different attributes. Deleting an entity and some other data associated with it (so you dont leave useless entities in the datastore) is also just a matter of adding an event and coding the behaviour you want. And the best part is that you don't need anything else than some basic JavaScript code. No more SQL! The script editor Select the automatically created "DataClass1" and go in the Events tab. Click on the "+" icon beside the OnInit event and the script editor will load automatically with the OnInit event created for you. You can see this event as the constructor for your object class in OOP. You will notice that the script editor is a full equiped editor with code wrap, auto-indent, code completion and suggestion. I'll be honnest, some of the code completion will seem ackward to you if you come from the desktop world like me. The reason behind some weird behaviour you could encounter in the future is often related to the scope you are working in. By that I mean that sometimes, you write server code and sometimes you write client code. Even if it seems that they should be related and should interact like a whole, don't forget that you are working on a client-server mechanic. One cannot act on the other directly, they can only talk to each other and tell each other what is happening on their side so the other side can react accordingly. So accessing the server from the client's side is a different process than accessing the server from the inside. Last words about the software You've now seen the most important parts of Wakanda. We will explore the other editors later as the need comes, but for now, you are ready to get to the next step. Let's do it the old way and start by manipulating the client's side. Accessing the internals of the GUI was one thing that took me a while to understand because of all the layers manipulated by the Wakanda framework at the same time. Category:Tutorials